<template>
	<view class="content">
		<text class="text" v-show="isshow" @click="change()">{{text}}</text>
		<text class="text" v-show="!isshow" @click="change()">{{text1}}</text>
		<view class="brand-list" v-for="(item,index) in brandList" @tap = "clickBrand(item.id)" :key = "index" >
			<text @tap="shift()" class="brand-text" :class="brandIndex == index? 'brand-active':''">{{item.name}}</text>
		</view>
		<view class="move-content" :style="{'left':moveDistance + 'upx'}"></view>
		<scroll-view class="scroll" scroll-y="true" :scroll-top="scroll" @scrolltoupper="upper" @scrolltolower="lower" :style="{height:scrollH+'rpx'}">

		<view class="photo1" v-show="hide1" >
			<view class="photo11">
				<image class="photo12" src="../../static/早餐.jpg" @tap="gate()" ></image>
			</view>
			<view class="wen">
			<text class="theme">温情早餐</text>
			<text class="time">7:30到9:30开放</text>
			<text class="position">美食区</text>
			</view>
			<view class="photo13">
			<img :src="isActive===true?'../../static/QQ图片20221218005258.png':'../../static/QQ图片20221218005314.png'" 
				 @click="go"></view>
		</view>
		<view class="photo2" v-show="hide2" >
			<view class="photo21">
				<image class="photo22" src="../../static/0ed4487c7173b5e3ed595ed1c8a_p24_mk24.jpg" @tap="gate1()"></image>
			</view>
			<text class="theme1">美食街活动</text>
			<text class="time1">9:30到11:00开放</text>
			<text class="position1">美食区</text>
			<view class="photo23">
			<img :src="isActive1===true?'../../static/QQ图片20221218005258.png':'../../static/QQ图片20221218005314.png'" 
				 @click="go1"></view>
		</view>
		<view class="photo3" v-show="hide3">
			<view class="photo31">
				<image class="photo32" src="../../static/d6e36f55ce0a41c8bb7f0b61970fef57_th.png" @tap="gate2()"></image>
			</view>
			<text class="theme2">亲子烘培</text>
			<text class="time2">13:30到15:30开放</text>
			<text class="position2">美食区</text>
			<view class="photo33">
			<img :src="isActive2===true?'../../static/QQ图片20221218005258.png':'../../static/QQ图片20221218005314.png'" 
				 @click="go2"></view>
		</view>
		<view class="photo4" v-show="hide4">
			<view class="photo41">
				<image class="photo42" src="../../static/a93ffea906d444bda994b39e0e269d43.jpeg" @tap="gate3()"></image>
			</view>
			<text class="theme3">主题电影院</text>
			<text class="time3">9:30到17:00开放</text>
			<text class="position3">休闲区</text>
			<view class="photo43">
			<img :src="isActive3===true?'../../static/QQ图片20221218005258.png':'../../static/QQ图片20221218005314.png'" 
				 @click="go3"></view>
		</view>
		<view class="photo5" v-show="hide5">
			<view class="photo51">
				<image class="photo52" src="../../static/2698e9cb54ba46ee920693c39c10b7fd.jpeg" @tap="gate4()"></image>
			</view>
			<text class="theme4">夜光派对</text>
			<text class="time4">20:30到24:00开放</text>
			<text class="position4">娱乐区</text>
			<view class="photo53">
			<img :src="isActive4===true?'../../static/QQ图片20221218005258.png':'../../static/QQ图片20221218005314.png'" 
				 @click="go4"></view>
		</view>
		
		</scroll-view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				text:"我的关注",
				text1:"全部",
				isshow: true,
				 circular:true,
				 hide1:true,
				 hide2:true,
				 hide3:true,
				 hide4:true,
				 hide5:true,
				 
			    brandList: [
					  {name: "一", id: 0}, 
					  {name: "二", id: 1}, 
					  {name: "三", id: 2}, 
					  {name: "四", id: 3}, 
					  {name: "五", id: 4},
					  {name: "六", id: 5},
					  {name: "日", id: 6},
			   ],
			   brandIndex:0,   
			   moveDistance:40 ,
			   isActive:false,
			   isActive1:false,
			   isActive2:false,
			   isActive3:false,
               isActive4:false,
			  

			   
			}
		},
		onLoad() {

		},
		methods: {
			change(){
				this.isshow=!this.isshow
				if(this.isActive===false)
				 {this.hide1=!this.hide1}
				 if(this.isActive1===false)
				  {this.hide2=!this.hide2}
				  if(this.isActive2===false)
				   {this.hide3=!this.hide3}
				   if(this.isActive3===false)
				    {this.hide4=!this.hide4}
					if(this.isActive4===false)
					 {this.hide5=!this.hide5}
				
				
			},
           clickBrand(index) {
           	var that = this
           	that.brandIndex = index
           	that.moveDistance = (that.brandIndex * 106) + 25
           	that.maxOrderList[that.brandIndex].page = 1
           	that.maxOrderList[that.brandIndex].nomore = false
           	that.maxOrderList[that.brandIndex].arr= []
           	that.getUserList(that.maxOrderList[that.brandIndex].id)
			
           },
		   
		  go(){ //收藏
		        var that=this;
		        if(that.isActive === false){
		  		//axios请求
		          that.isActive = true
		          
		        }else if(that.isActive === true){
		  		//axios请求
		          that.isActive = false
		         
		   }
		   },
		   go1(){ //收藏
		         var that=this;
		         if(that.isActive1 === false){
		   		//axios请求
		           that.isActive1 = true
		           
		         }else if(that.isActive1 === true){
		   		//axios请求
		           that.isActive1 = false
		          
		    }
		    },
			go2(){ //收藏
			      var that=this;
			      if(that.isActive2 === false){
					//axios请求
			        that.isActive2 = true
			        
			      }else if(that.isActive2 === true){
					//axios请求
			        that.isActive2 = false
			       
			 }
			 },
			 go3(){ //收藏
			       var that=this;
			       if(that.isActive3=== false){
			 		//axios请求
			         that.isActive3 = true
			         
			       }else if(that.isActive3 === true){
			 		//axios请求
			         that.isActive3 = false
			        
			  }
			  },
			  go4(){ //收藏
			        var that=this;
			        if(that.isActive4=== false){
			  		//axios请求
			          that.isActive4 = true
			          
			        }else if(that.isActive4 === true){
			  		//axios请求
			          that.isActive4 = false
			          }
			        
			  
},

gate(){
	uni.navigateTo({
		url:'/pages/activity/activity'
	})
},
gate1(){
	uni.navigateTo({
		url:'/pages/activity/activity'
	})
},
gate2(){
	uni.navigateTo({
		url:'/pages/activity/activity'
	})
},
gate3(){
	uni.navigateTo({
		url:'/pages/activity/activity'
	})
},
gate4(){
	uni.navigateTo({
		url:'/pages/activity/activity'
	})
},
shift(){
	uni.navigateTo({
		url:'/pages/index/index'
	})
}




			   
		}
	}
</script>

<style>
.text{
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 20px;
	z-index: 1;
}
	.content {
		width: 750upx;
		height: 150upx;
		position: relative;
		display: flex;
		flex-direction: row;
		position: fixed;
	}
	.brand-list{
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		
	}
	.brand-text{
		font-size: 28upx;
		position: absolute;
		top: 60px;
		color: #999999;
		z-index: 1;
		
		
	}
	.brand-active {
		color: #e94e49;
	}
	.move-content{
		position: absolute;
		top: 90px;
		left: 0px;
		width:70upx;
		height: 8upx;
		background-color: #e94e49;
		border-radius: 6upx;
		transition-property: left;
	    transition-duration: 0.3s;
	    transition-timing-function: ease-out;
		
		z-index: 1;
			
	}

.scroll{
	position: absolute;
	top: 60px;
	height: 570px;
}

.photo1{
	
	position: absolute;
	
	
	 top: 50px;
	 right: 0px;
	 width: 371px;
	 height: 170px;
	 
	}
.photo12{
	width:200px;
	height:164px;
	
	border-radius: 20px;
}
.photo13{
	position: absolute;
	top:18px;
	right: 10px;
	
}

.theme{
	position: absolute;
	top:10px;
	right: 60px;
	font-weight: 1000px;
	font-size: 25px;
}
.time{
	position: absolute;
	top:100px;
	right: 53px;
	font-size: 15px;
}
.position{
	position: absolute;
	top:130px;
	right: 112px;
	font-size: 15px;
}
.photo2{
	
	position: absolute;
	 top: 220px;
	 right: 0px;
	 width: 371px;
	 height: 170px;
	
}
.photo22{
	width:200px;
	height:164px;
	
	border-radius: 20px;
}
.photo23{
	position: absolute;
	top:18px;
	right: 10px;
	
}	
.theme1{
	position: absolute;
	top:10px;
	right: 35px;
	font-weight: 1000px;
	font-size: 25px;
}
.time1{
	position: absolute;
	top:100px;
	right: 45px;
	font-size: 15px;
}
.position1{
	position: absolute;
	top:130px;
	right: 112px;
	font-size: 15px;
}
.photo3{
	
	position: absolute;
	 top: 390px;
	 right: 0px;
	 width: 371px;
	 height: 170px;}
.photo32{
	width:200px;
	height:164px;
	border-radius: 20px;
}
.photo33{
	position: absolute;
	top:18px;
	right: 10px;
	
}	
.theme2{
	position: absolute;
	top:10px;
	right: 60px;
	font-weight: 1000px;
	font-size: 25px;
}
.time2{
	position: absolute;
	top:100px;
	right: 37px;
	font-size: 15px;
}
.position2{
	position: absolute;
	top:130px;
	right: 112px;
	font-size: 15px;
}
.photo4{
	
	position: absolute;
	 top: 560px;
	 right: 0px;
	 width: 371px;
	 height: 170px;
}
.photo42{
	width:200px;
	height:164px;
	border-radius: 20px;
}
.photo43{
	position: absolute;
	top:18px;
	right: 10px;
	
}	
.theme3{
	position: absolute;
	top:10px;
	right: 35px;
	font-weight: 1000px;
	font-size: 25px;
}
.time3{
	position: absolute;
	top:100px;
	right: 45px;
	font-size: 15px;
}
.position3{
	position: absolute;
	top:130px;
	right: 112px;
	font-size: 15px;}
	.scroll-view{
		position: absolute;
		top:40px;
		white-space: nowrap;
		height:550px;
		width:100%;
	}
.photo5{
	
	position: absolute;
	 top: 730px;
	 right: 0px;
	 width: 371px;
	 height: 170px;}
.photo52{
	width:200px;
	height:164px;
	border-radius: 20px;
}
.photo53{
	position: absolute;
	top:18px;
	right: 10px;
	
}	
.theme4{
	position: absolute;
	top:10px;
	right: 60px;
	font-weight: 1000px;
	font-size: 25px;
}
.time4{
	position: absolute;
	top:100px;
	right: 37px;
	font-size: 15px;
}
.position4{
	position: absolute;
	top:130px;
	right: 112px;
	font-size: 15px;
}
</style>
